<template>
  <div>
    <div class="container-fluid">
      <div class="common_title">
        文章类别管理
      </div>
      <div class="container-fluid common_con">
        <table
          class="table table-striped table-bordered table-hover mp20 category_table"
        >
          <thead>
            <tr>
              <th>名称</th>
              <th>Slug</th>
              <th class="text-center" width="100">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in list" :key="item.id">
              <td>{{ item.name }}</td>
              <td>{{ item.slug }}</td>
              <td class="text-center">
                <a
                  href="javascript:void(0)"
                  data-toggle="modal"
                  class=" btn btn-info btn-xs"
                  @click="editClick(item)"
                  >编辑</a
                >
                <a
                  href="javascript:void(0)"
                  class="btn btn-danger btn-xs"
                  @click="deleteClick(item.id)"
                  >删除</a
                >
              </td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <td colspan="3" class="text-center">
                <button
                  class="btn btn-success"
                  id="xinzengfenlei"
                  data-toggle="modal"
                  data-target="#myModal"
                  @click="showDialog = true"
                >
                  新增分类
                </button>
              </td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
    <!-- //对话框 -->
    <el-dialog
      title="文章分类管理"
      :visible.sync="showDialog"
      :modal-append-to-body="false"
    >
      <el-form>
        <el-form-item label="分类名称" label-width="120px">
          <el-input v-model="name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分类描述" label-width="120px">
          <el-input v-model="slug" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">取 消</el-button>
        <el-button type="primary" @click="doAdd">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 导入接口
import {
  getArticleCategory,
  addArticleCategory,
  editArticleCategory,
  deleteArticleCategory
} from './article.js'

export default {
  name: 'articleCategory',
  data () {
    return {
      list: [], //文章分类数组
      showDialog: false, //对话框显示
      name: '',
      slug: '',
      id: '',
      isEdit: false //
    }
  },
  created () {
    //请求数据
    this.reload()
  },
  methods: {
    // 请求数据
    async reload () {
      let res = await getArticleCategory()
      console.log(res)
      //绑定数据
      this.list = res.data.data
    },
    async doAdd () {
      if (this.isEdit) {
        //true:编辑
        //1.调用接口
        let res = await editArticleCategory({
          name: this.name,
          slug: this.slug,
          id: this.id
        })
        //2.弹窗提示
        this.$message('编辑成功')
        //3.对话框隐藏
        this.showDialog = false
        //4.主动刷新数据
        this.reload()
        //5.关闭编辑开关,否则下一次点击新增还是执行编辑
        this.isEdit = false
        //6.文本清空
        this.name = ''
        this.slug = ''
      } else {
        //1.调用接口
        let res = await addArticleCategory({
          name: this.name,
          slug: this.slug
        })
        console.log(res)
        //2.弹窗提示
        this.$message('新增成功')
        //3.对话框隐藏
        this.showDialog = false
        //4.主动刷新数据
        this.reload()
      }
    },
    //点击编辑按钮
    editClick (item) {
      console.log(item)
      //1.获取当前点击的分类数据
      this.name = item.name
      this.slug = item.slug
      this.id = item.id
      //2.弹出对话框
      this.showDialog = true
      //3.设置为编辑状态\
      this.isEdit = true
    },
    //点击删除按钮
    async deleteClick (id) {
      //1.发送请求
      let res = await deleteArticleCategory(id)
      //2.弹窗提示
      this.$message('删除成功')
      //3.主动刷新数据
      this.reload()
    }
  }
}
</script>

<style></style>
